<template lang="html">
  <div class="member-info-container">
    <Headbar />
    <Hungbar />
    <MemberHeadMenu ideName="memberCenter"/>
    <div class="yh-layout-box">
      <div class="comments-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item><nuxt-link to="/member">买家中心</nuxt-link></el-breadcrumb-item>
          <el-breadcrumb-item><nuxt-link to="/member/orders">订单中心</nuxt-link></el-breadcrumb-item>
          <el-breadcrumb-item>订单：{{ orderNo }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="panel-order-detail">

        <div class="head">
          <h4>订单详情</h4>
        </div>
        <div class="body">
          <div class="status-info">
            <div class="status-bg">

            </div>
            <div class="status fl">
              <h5 v-if="info.orderStatus == 1">等待付款</h5>
              <p v-if="info.orderStatus == 1">订单将在{{ countdownText }}后自动关闭</p>
              <!-- <router-link :to="{name: 'MealCashierOrder', query: {productOrderNo:info.orderNo}}" class="pay-btn" v-if="info.orderStatus == 1">立即支付</router-link> -->
              <a class="pay-btn" v-if="info.orderStatus == 1" @click="routeToPath('/meal/cashierOrder?productOrderNo='+info.orderNo)">立即支付</a>

              <h5 v-if="info.orderStatus == 2">等待卖家发货</h5>
              <p v-if="info.orderStatus == 2">订单于 {{ info.payTime }} 已付款成功</p>

              <h5 v-if="info.orderStatus == 3">卖家已发货，等待收货</h5>
              <p v-if="info.orderStatus == 3 && info.waybill !='' && logisticsInfo.length">{{ logisticsInfo[0].context }}</br>{{ logisticsInfo[0].ftime }}</p>
              <a href="javascript:;" v-if="info.orderStatus == 3 && info.waybill !='' && logisticsInfo.length" @click="dialogLogistics = true">查看物流信息></a>

              <h5 v-if="info.orderStatus == 4 || info.orderStatus == 5">已完成</h5>
              <p v-if="(info.orderStatus == 4 || info.orderStatus == 5) && info.waybill !='' && logisticsInfo.length">{{ logisticsInfo[0].context }}</br>{{ logisticsInfo[0].ftime }}</p>
              <a href="javascript:;" v-if="(info.orderStatus == 4 || info.orderStatus == 5) && info.waybill !='' && logisticsInfo.length" @click="dialogLogistics = true">查看物流信息></a>

              <h5 v-if="info.orderStatus == 6 || info.cancelStatus == 1">订单已取消</h5>
              <p v-if="info.orderStatus == 6 || info.cancelStatus == 1">订单于{{ info.overTime }}已关闭</p>

            </div>
            <div class="progress fl">
              <div class="progress-container">
                <div class="progress-step active">
                  <img src="@/assets/images/order/step-one-active.png">
                  <p>提交订单</p>
                </div>
                <div class="step-line">
                  <img src="@/assets/images/order/arrow-active.png">
                </div>
                <div class="progress-step" :class="{'active': info.orderStatus>=2}">
                  <img src="@/assets/images/order/step-two.png" v-if="info.orderStatus<2">
                  <img src="@/assets/images/order/step-two-active.png" v-if="info.orderStatus>=2">
                  <p>付款成功</p>
                </div>
                <div class="step-line">
                  <img src="@/assets/images/order/arrow.png" v-if="info.orderStatus<2">
                  <img src="@/assets/images/order/arrow-active.png" v-if="info.orderStatus>=2">
                </div>
                <div class="progress-step" :class="{'active': info.orderStatus>=3}">
                  <img src="@/assets/images/order/step-three.png" v-if="info.orderStatus<3">
                  <img src="@/assets/images/order/step-three-active.png" v-if="info.orderStatus>=3">
                  <p>等待发货</p>
                </div>
                <div class="step-line">
                  <img src="@/assets/images/order/arrow.png" v-if="info.orderStatus<3">
                  <img src="@/assets/images/order/arrow-active.png" v-if="info.orderStatus>=3">
                </div>
                <div class="progress-step" :class="{'active': info.orderStatus>=4}">
                  <img src="@/assets/images/order/step-four.png" v-if="info.orderStatus<4">
                  <img src="@/assets/images/order/step-four-active.png" v-if="info.orderStatus>=4">
                  <p>等待收货</p>
                </div>
                <div class="step-line">
                  <img src="@/assets/images/order/arrow.png" v-if="info.orderStatus<4">
                  <img src="@/assets/images/order/arrow-active.png" v-if="info.orderStatus>=4">
                </div>
                <div class="progress-step" :class="{'active': info.orderStatus>=4}">
                  <img src="@/assets/images/order/step-five.png" v-if="info.orderStatus<4">
                  <img src="@/assets/images/order/step-five-active.png" v-if="info.orderStatus>=4">
                  <p>完成</p>
                </div>
              </div>
            </div>
          </div>
          <div class="order-info">
            <div class="order-info-wrap">
              <div class="order-info-list">
                <h5 class="order-info-title">
                  收货人信息
                </h5>
                <div class="order-info-item">
                  <div class="info-left">收货人:</div>
                  <div class="info-value" v-if="info.orderAddressDTO">{{ info.orderAddressDTO.consignee }}</div>
                </div>
                <div class="order-info-item">
                  <div class="info-left">手机号码:</div>
                  <div class="info-value" v-if="info.orderAddressDTO">{{ info.orderAddressDTO.phone }}</div>
                </div>
                <div class="order-info-item">
                  <div class="info-left">地址:</div>
                  <div class="info-value" v-if="info.orderAddressDTO">{{ info.orderAddressDTO.provinceName }} {{ info.orderAddressDTO.cityName }} {{ info.orderAddressDTO.districtName }} {{ info.orderAddressDTO.address }}</div>
                </div>
              </div>
              <div class="order-info-list">
                <h5 class="order-info-title">
                  订单信息
                </h5>
                <div class="order-info-item">
                  <div class="info-left">订单编号:</div>
                  <div class="info-value">{{ info.orderNo }}</div>
                </div>
                <div class="order-info-item" v-if="info.payTime">
                  <div class="info-left">下单时间:</div>
                  <div class="info-value">{{ info.payTime }}</div>
                </div>
                <div class="order-info-item">
                  <div class="info-left">留言:</div>
                  <div class="info-value">{{ info.memo ? info.memo : '暂无留言' }}</div>
                </div>
              </div>
              <div class="order-info-list">
                <h5 class="order-info-title">
                  配送信息
                </h5>
                <div class="order-info-item">
                  <div class="info-left">配送方式:</div>
                  <div class="info-value">{{ info.transportType == 1 ? '快递运输' : '上门自提' }}</div>
                </div>
                <div class="order-info-item">
                  <div class="info-left">运费金额:</div>
                  <div class="info-value">￥{{ info.freight }}</div>
                </div>
              </div>
              <div class="order-info-list">
                <h5 class="order-info-title">
                  发票信息
                </h5>

                <div v-if="info.orderInvoiceDTO">
                  <div class="order-info-item" v-if="info.orderInvoiceDTO">
                    <div class="info-left">发票类型:</div>
                    <div class="info-value" v-if="info.orderInvoiceDTO.invoiceType == 1">普通发票-个人</div>
                    <div class="info-value" v-if="info.orderInvoiceDTO.invoiceType == 2">普通发票-单位</div>
                    <div class="info-value" v-if="info.orderInvoiceDTO.invoiceType == 3">增值税专用发票</div>
                  </div>
                  <div class="order-info-item" v-if="info.orderInvoiceDTO && info.orderInvoiceDTO.title!=''">
                    <div class="info-left">发票抬头:</div>
                    <div class="info-value">{{ info.orderInvoiceDTO.title}}</div>
                  </div>
                  <div class="order-info-item" v-if="info.orderInvoiceDTO && info.orderInvoiceDTO.taxPayerCode!=''">
                    <div class="info-left">纳税人识别号:</div>
                    <div class="info-value">{{ info.orderInvoiceDTO.taxPayerCode}}</div>
                  </div>
                  <div class="order-info-item" v-if="info.orderInvoiceDTO && info.orderInvoiceDTO.companyAddress!=''">
                    <div class="info-left">注册地址:</div>
                    <div class="info-value">{{ info.orderInvoiceDTO.companyAddress}}</div>
                  </div>
                  <div class="order-info-item" v-if="info.orderInvoiceDTO && info.orderInvoiceDTO.telephone!=''">
                    <div class="info-left">注册电话:</div>
                    <div class="info-value">{{ info.orderInvoiceDTO.telephone}}</div>
                  </div>
                  <div class="order-info-item" v-if="info.orderInvoiceDTO && info.orderInvoiceDTO.bankName!=''">
                    <div class="info-left">开户银行:</div>
                    <div class="info-value">{{ info.orderInvoiceDTO.bankName}}</div>
                  </div>
                  <div class="order-info-item" v-if="info.orderInvoiceDTO && info.orderInvoiceDTO.backAccount!=''">
                    <div class="info-left">银行账户:</div>
                    <div class="info-value">{{ info.orderInvoiceDTO.backAccount}}</div>
                  </div>
                  <div class="order-info-item" v-if="info.orderInvoiceDTO && info.orderInvoiceDTO.taxContent!=''">
                    <div class="info-left">发票内容:</div>
                    <div class="info-value">{{ info.orderInvoiceDTO.taxContent}}</div>
                  </div>
                </div>
                <div class="order-invoice-empty" v-else>
                  不开发票
                </div>
              </div>
            </div>
          </div>
          <div class="order-product">
            <div class="order-pd-company">
              <span @click="routeToPath('/factory?factoryId='+info.factoryId)">{{ info.factoryName}}</span>
              <img src="@/assets/images/member/comment_ico02.png" @click="handleChat()">
            </div>
            <div class="order-pd-table">
              <div class="order-header">
                <div class="order-th pd-th">商品</div>
                <div class="order-th size-th">规格</div>
                <div class="order-th num-th">数量</div>
                <div class="order-th pricr-th">金额</div>
              </div>
              <div class="order-pd-con">
                <div class="order-list-inner" v-for="(item, index) in info.orderItemDTOList">
                  <div class="order-pdMsg fl">
                    <div class="order-pd-img fl">
                      <img :src="URL.PIC+item.productPic" @click="routeToPath('/product/detail?id='+item.productId)" />
                    </div>
                    <div class="order-pdName fl" @click="routeToPath('/product/detail?id='+item.productId)">
                      {{ item.productName }}
                    </div>
                  </div>

                  <div class="order-pd-specification fl">
                    {{ item.specifications }}
                  </div>
                  <div class="order-pd-num fl">
                    {{ item.quantity }}
                  </div>
                  <div class="order-pd-price fl">
                    ￥{{ item.productPrice }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="account-info">
            <div class="account-info-content fr">
              <div class="account-price-list">
                <span class="account-type">商品金额：</span>
                <span class="account-values">￥{{ info.amount }}</span>
              </div>
             <!--  <div class="account-price-list">
                <span class="account-type">优惠金额：</span>
                <span class="account-values">￥{{ info.payAmount }}</span>
              </div> -->
              <div class="account-price-list">
                <span class="account-type">运费金额：</span>
                <span class="account-values">￥{{ info.freight }}</span>
              </div>
              <div class="account-price-list">
                <span class="account-type pay-totalTit">支付金额：</span>
                <span class="account-values pay-sum">￥{{ info.payAmount }}</span>
              </div>
              <div class="account-button fr">
                <span class="cancelBtn" v-if="info.orderStatus == 1" @click="handleCancelOrder(info.id)">取消订单</span>
                <!-- <router-link :to="{name: 'MealCashierOrder', query: {productOrderNo:info.orderNo}}" class="payBtn" v-if="info.orderStatus == 1">立即支付</router-link> -->
                <a class="payBtn" v-if="info.orderStatus == 1" @click="routeToPath('/meal/cashierOrder?productOrderNo='+info.orderNo)">立即支付</a>

                <span class="cancelBtn" v-if="info.orderStatus == 2" @click="handleCancelSalesOrder(info.id)">申请售后</span>
                <span class="payBtn" v-if="info.orderStatus == 2" @click="handleRemind(info.orderNo)">提醒发货</span>

                <span class="payBtn" v-if="info.orderStatus == 3" @click="handleConfirmReceipt(info.orderNo)">确认收货</span>


                <span class="cancelBtn" v-if="info.orderStatus == 4 || info.orderStatus == 5 || info.orderStatus == 6" @click="handleAgainBuy(info.orderNo)">再次购买</span>
                <!-- <router-link :to="{name:'CommentsList', query:{ orderNo: info.orderNo, factoryName: info.factoryName }}" class="payBtn" v-if="info.orderStatus == 4">评价</router-link> -->
                <a class="payBtn" v-if="info.orderStatus == 4" @click="routeToPath('/member/orders/commentsList?orderNo='+info.orderNo+'&factoryName='+info.factoryName)">评价</a>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!--物流信息-->
    <el-dialog
      title="物流信息"
      :visible.sync="dialogLogistics"
      v-if="logisticsInfo.length"
      width="680px">
      <div class="logistics-info">
        <div class="number">物流公司：{{ logisticsInfo[0].company }}<br/>物流单号：{{ logisticsInfo[0].waybill }}</div>
        <div class="list">
          <div class="item" :class="{'active': index == 0}" v-for="(item, index) in logisticsInfo">
            <div class="icon">
              <img src="@/assets/images/order/icon-logistics-active.png" v-if="index == 0"/>
              <img src="@/assets/images/order/icon-logistics.png" v-if="index == logisticsInfo.length-1"/>
              <i v-if="index>0 && index<logisticsInfo.length-1"></i>
            </div>
            <div class="info">
              <div class="title">{{ item.context }}<br/>
              {{ item.ftime }}</div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogLogistics = false">关闭</el-button>
      </span>
    </el-dialog>

    <Footbars/>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import MemberHeadMenu from '../components/MemberHeadMenu'
import { getOrderDetail, cancelOrder, reminderShipment, applyCancelOrder, confirmReceipt, againBuyOrder, getLogisticsInfo } from '@/api/order'
export default {
  name: 'MemberOrderDetail',
  components: {
    Headbar,
    Hungbar,
    Footbars,
    MemberHeadMenu
  },
  data() {
  	return{
  		info: {},
      logisticsInfo: [],
      dialogLogistics: false,
      currentTime: '',
      timer: null,
      countdownText: '',
      isEnd: true,
      orderNo: ''
  	}
  },
  created() {
    this.orderNo = this.$route.params.id
    this.getOrderDetail();
  },
  methods: {
    handleChat() {
      this.$message({
        message: '供应商暂未开启客服功能',
        type: 'warning'
      });
    },
    //获取订单详情
    getOrderDetail() {
      const params = {
      	orderNo: this.orderNo
      }
      getOrderDetail(params).then(res => {
        if(res.code == 200){
          this.info = res.data
          if(res.data.waybill!=null && res.data.waybill!=''){
            this.getLogisticsInfo(res.data.waybill)
          }
          if(res.data.orderStatus == 1){
            this.currentTime = new Date(this.formatTime(res.data.interfaceDate)).getTime()
            this.countdown(this.formatTime(res.data.overTime))
            clearInterval(this.timer)
            this.timer = setInterval(()=>{
              this.countdown(this.formatTime(res.data.overTime))
            }, 1000);
          }
        }
      })
    },
    //取消订单
    handleCancelOrder(orderId) {
      this.$confirm('是否确认取消订单？', '取消订单提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelOrder(orderId)
      }).catch(() => {

      });
    },
    cancelOrder(orderId) {
      const params = {
        orderId: orderId,
        userId: this.getUserInfo().userId
      }
      cancelOrder(params).then(res => {
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.getOrderDetail();
        }else{
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      })
    },
    //提醒发货
    handleRemind(orderNo) {
      const params = {
        orderNo: orderNo
      }
      reminderShipment(params).then(res => {
        if(res.code == 200){
          this.$message({
             type: 'success',
             message: res.msg
          });
        }else{
          this.$message({
             type: 'error',
             message: res.msg
          });
        }
      })
    },
    //申请售后
    handleCancelSalesOrder(orderId) {
      const h = this.$createElement;
      this.$msgbox({
        title: '申请售后',
        customClass: 'sales-msgbox',
        message: h('p', null, [
          h('span', null, '售后申请项： '),
          h('i', null, '取消订单并退款'),
          h('p', { style: 'color: #999' }, '请与卖家事先协商再提交申请，若卖家同意，则款项原路退回。')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.applyCancelOrder(orderId)
      }).catch(() => {

      });
    },
    applyCancelOrder(orderId) {
      const params = {
        orderId: orderId,
        userId: this.getUserInfo().userId
      }
      applyCancelOrder(params).then(res => {
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: res.msg
          });
        }else{
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      })
    },
    //确认收货
    handleConfirmReceipt(orderNo) {
      const h = this.$createElement;
      this.$msgbox({
        title: '确认收货提示',
        customClass: 'sales-msgbox',
        message: h('p', null, [
          h('span', null, '是否确认已经收到货物？'),
          h('p', { style: 'color: #999' }, '确认收货后，货款将结算给卖家，请务必收到货后，再点击确认！')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        console.log(orderNo)
        this.confirmReceipt(orderNo)
      }).catch(() => {

      });
    },
    confirmReceipt(orderNo) {
      console.log(orderNo)
      const params = {
        orderNo: orderNo
      }

      confirmReceipt(params).then(res => {
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.getOrderList();
        }else{
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      })
    },
    //再次购买
    handleAgainBuy(orderNo) {
      this.againBuyOrder(orderNo);
    },
    againBuyOrder(orderNo) {
      const params = {
        orderNo: orderNo
      }
      let ids = ''
      againBuyOrder(params).then(res => {
        if(res.code == 200){
          res.data.forEach((item, i) => {
            ids+=item + ','
          })
          location.href = this.URL.mall+'/cart/list?againIds='+ids.substring(0, ids.length-1)
          // this.$router.push({
          //   name: 'CartList',
          //   query: {
          //     againIds: ids.substring(0, ids.length-1)
          //   }
          // })
        }
      })
    },
    //获取订单物流信息
    getLogisticsInfo(waybill) {
      const params = {
        waybill: waybill
      }
      getLogisticsInfo(params).then(res => {
        if(res.code == 200){
          if(res.data.length){
            this.logisticsInfo = res.data
          }
        }
      })
    },
    //订单过期倒计时
    countdown(end) {
      let endTime = new Date(end).getTime();
      let difference = endTime - this.currentTime;
      if(difference<0){
        clearInterval(this.timer)
        if(this.isEnd){
          this.isEnd = false;
          this.getOrderDetail()
        }
        return;
      }
      let d = Math.floor(difference/1000/60/60/24);
      let h = Math.floor(difference/1000/60/60%24);
      let m = Math.floor(difference/1000/60%60);
      let s = Math.floor(difference/1000%60);
      this.currentTime = this.currentTime + 1000
      this.countdownText = this.zeroize(h)+':'+this.zeroize(m)+':'+this.zeroize(s)
    },
    formatTime(str) {
      return str.replace(/-/g, '/')
    },
    zeroize(num){
      return num<10?'0'+num:num;
    }
  }
}
</script>

<style lang="scss" scoped>
	@import '@/styles/pages/orderDetail.scss';
  .comments-breadcrumb{
    margin-top: 20px;
  }
</style>
